<template>
	<!-- 授权登录弹出层 -->
	<view class="popup-bg-box _flex-col-center-mid" @touchmove.stop.prevent="`return`" v-if="show">
		<view class="popup-box _pos-rel">
			<view class="bg"></view>
			<view class="content-box _pos-rel _flex-col-mid" >
				<view class="theme-color _font-20 _b">授权登录</view>
				<view class="_color-66 _font-14 tips1">授权后体验更好的服务</view>
				<view class="_color-66 _font-14 tips2">点击下方头像、昵称获得您的公开信息</view>
				<button class="item _flex-row-bet-mid _font-14 _mar-top-10" hover-class="none" open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<text>设置头像</text>
					<view class="_flex-row-mid _flex-1" v-if="avatar == ''">
						<input class="_flex-1 _text-right _mar-right-5 _font-14" placeholder="点击获取微信头像" placeholder-class="_color-98" :disabled="true">
						<text class="iconfont icon-xiangyou"></text>
					</view>
					<image v-else class="_w-30 _h-30 _border-circle" :src="avatar"></image>
				</button>
				<view class="item _flex-row-bet-mid _font-14">
					<text>设置昵称</text>
					<view class="_flex-row-mid _flex-1">
						<input class="_flex-1 _text-right _mar-right-5 _font-14" type="nickname" v-model="nickname" placeholder="点击获取微信昵称" placeholder-class="_color-98">
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<!-- <view class="item _flex-row-bet-mid _font-14">
					<text>邮箱</text>
					<view class="_flex-row-mid _flex-1">
						<input class="_flex-1 _text-right _mar-right-5 _font-14" type="text" v-model="email"
							placeholder="请填写邮箱" placeholder-class="_color-98">
					</view>
				</view> -->
				<view class="item _flex-row-bet-mid _font-14">
					<text>手机号</text>
					<view class="_flex-row-mid">
						<button v-if="phone == ''" class="btn-phone _flex-1 _text-right _mar-right-5 _font-14" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="color: #999;">点击授权</button>
						<input v-else class="_flex-1 _text-right _mar-right-5 _font-14" type="number" v-model="phone" placeholder="请填写手机号" placeholder-class="_color-98" >
						<!-- <input class="_flex-1 _text-right _mar-right-5 _font-14" type="number" v-model="phone" placeholder="请填写手机号" placeholder-class="_color-98" > -->
					</view>
				</view>
				<view class="btn" @click="save" style="background-color: #666">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		TOKENNAME,
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import store from '@/store/index.js';
	import {
		userEdit,getUserPhone,getUserInfo
	} from '@/api/user.js';
	export default {
		props: {
			show: {
				type: Boolean,
				default: true,
			},
			userInfo: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				avatar: '',
				nickname: '',
				email: '',
				phone: '',
			}
		},
		watch: {
			userInfo(n, o) {
				this.avatar = n.avatar
				if (n.nickname != '微信用户') {
					this.nickname = n.nickname
				}
				if (n.email != '') {
					this.email = n.email
				}
				if (n.phone != '') {
					this.phone = n.phone
				}
			}
		},
		methods: {
			getUserInfo() {
				getUserInfo().then((res) => {
					this.phone = res.data.phone
				})
			},
			getPhoneNumber(e) {
				if (!e.detail.encryptedData) {
					return false;
				}
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(res1) {
						getUserPhone({
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							code: res1.code,
						}).then(res => {
							that.$util.Tips({
								title: '绑定成功'
							});
							let time = res.data.expires_time - that.$Cache.time();
							that.$store.commit('LOGIN', {
								token: res.data.token,
								time: time
							});
							that.getUserInfo();
						}).catch(res => {
							uni.hideLoading();
						});
					}
				})
			},
			// 上传头像
			chooseavatar(e) {
				let that = this;
				let avatar = e.detail.avatarUrl
				uni.uploadFile({
					url: HTTP_REQUEST_URL + '/api/upload/image',
					filePath: avatar,
					fileType: 'image',
					name: 'pics',
					formData: {
						'filename': 'pics'
					},
					header: {
						// #ifdef MP
						"Content-Type": "multipart/form-data",
						// #endif
						[TOKENNAME]: 'Bearer ' + store.state.app.token
					},
					success: function(res) {
						uni.hideLoading();
						if (res.statusCode == 403) {
							that.$util.Tips({
								title: res.data
							});
						} else {
							let data = res.data ? JSON.parse(res.data) : {};
							if (data.status == 200) {
								that.avatar = data.data.url;
							} else {
								that.avatar = data.data.url;
								that.$util.Tips({
									title: data.msg
								});
							}
						}
					},
					fail: function(res) {
						uni.hideLoading();
						that.Tips({
							title: '上传图片失败'
						});
					}
				})
			},

			// 保存
			save() {
				let that = this,
					value = {};
				value.avatar = this.avatar;
				value.nickname = this.nickname;
				value.email = this.email;
				value.phone = this.phone;
				if (!value.nickname) return that.$util.Tips({
					title: '请授权微信昵称'
				});
				// if (!value.email) return that.$util.Tips({
				// 	title: '请输入邮箱'
				// });
				if (!value.phone) return that.$util.Tips({
					title: '请输入手机号码'
				});
				userEdit(value).then(res => {
					that.$emit('saveOver', '')
					return that.$util.Tips({
						title: res.msg,
						icon: 'success'
					});
				}).catch(msg => {
					return that.$util.Tips({
						title: msg || '保存失败'
					});
				});
			},
		},
	}
</script>

<style scoped lang="scss">
	._color-66 {
		color: #666;
	}

	._color-98 {
		color: #9B9898;
	}

	.popup-bg-box {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.6);
		z-index: 1000;

		.popup-box {
			width: 608rpx;
			// height: 674rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			overflow: hidden;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 280rpx;
				// background-image: linear-gradient(to bottom,rgba(var(--theme-color-rgba),.5),#fff,#fff);
				background-image: linear-gradient(to bottom, rgba(var(--theme-color-rgba), .2), #fff, #fff);
			}

			.content-box {
				padding: 62rpx 36rpx 64rpx 54rpx;

				.tips1 {
					margin-top: 22rpx;
				}

				.tips2 {
					margin-top: 14rpx;
				}

				.item {
					width: 100%;
					border-bottom: 2rpx solid #ECECEC;
					padding: 40rpx 20rpx 20rpx 26rpx;
				}
			}

			.icon-xiangyou {
				font-size: 20rpx;
			}

			.btn {
				width: 500rpx;
				height: 88rpx;
				border-radius: 200rpx;
				background-image: linear-gradient(to right, var(--theme-color-left), var(--theme-color-right));
				color: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				text-align: center;
				margin-top: 58rpx;
				line-height: 88rpx;
			}
		}
	}
	button::after{
		content: "";
		border: none;
	}
</style>
